<template>
    <div class="basePet">
        <div class="operate">
            <el-button type="primary" @click="addBase">添加科室</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入科室查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="baseTable">
            <el-table border :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="Id" width="140" />
                <el-table-column prop="name" label="科室" width="140" />
                <el-table-column prop="nowCount" label="容量" width="140" />
                <el-table-column prop="iphone" label="手机" width="140" />
                <el-table-column prop="supers" label="负责人" width="140" />
                <el-table-column prop="createTime" label="时间" width="140" />
                <el-table-column fixed="right" label="操作" width="190">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="EditClick(scope)">修改</el-button>
                    <el-button type="info" size="small" @click="deleteClick(scope)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="this.pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl"
            :before-close="handleClose"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="科室">
                        <el-input v-model="fromData.name" />
                    </el-form-item>
                    <el-form-item label="容量">
                        <el-select v-model="fromData.nowCount" placeholder="请选择">
                            <el-option label="50人" value="50" />
                            <el-option label="100人" value="100" />
                            <el-option label="200人" value="200" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="fromData.iphone" />
                    </el-form-item>
                    <el-form-item label="负责人">
                        <el-input v-model="fromData.supers" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
    data(){
        return{
            searchName:'',
            tableData:[],
            fromData:{
                "name":'',
                "nowCount":"",
                "iphone":0,
                "supers":'',
                "createTime":''
            },
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            },
            drawer:false,
            Title:"添加",
            dialogVisible:false
        }
    },
    created () {
        this.LoadData();
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    methods:{
        LoadData(){
            let self = this;
            let row = self.pageData();
            row.name = null,
            self.$http.post(`${self.baseUrl}/deptinfo/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        selectArea(){
            this.dialogVisible = true;
        },
        // 获取子组件传来的地址
        Getaddr(msg){
            let { lng,lat} = msg.point;
            this.fromData.area = `${msg.address}-${msg.title}`;
            this.fromData.lal = `[${lng},${lat}]`;
        },
        addBase(){
            this.fromData = this.initial();
            this.drawer = true;
            this.Title = "添加";
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.current = 1;
            self.$http.post(`${self.baseUrl}/deptinfo/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        EditClick(msg){
            this.Title = "修改";
            this.drawer = true;
            this.fromData = msg.row;
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除此${msg.row.name}救助站吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/deptinfo/deleteDeptinfo?id=${msg.row.id}`).then(res=>{
                    console.log(res)
                    if(res.data !=0){
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        self.LoadData();
                    }else{
                        ElMessage({
                            type: 'error',
                            message: '删除失败，请检查该救助站是否有宠物',
                        })
                    }
                })
            }).catch(() => {})
        },
        onSubmit(){
            let self = this;
            let d = 'AddDeptinfo';
            if(this.Title == "修改") d = 'updateDeptinfo';
            self.$http.post(`${self.baseUrl}/deptinfo/${d}`,self.fromData).then(res=>{
                if(res.data!=0){
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    self.drawer = false;
                    self.LoadData();
                }
            })
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return {
                "name":'',
                "nowCount":"",
                "iphone":0,
                "supers":'',
                "createTime":''
            }
        }
    }
})
</script>
<style scoped>
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
    .el-pagination{
        margin-top: 5px;
    }
    .baseTable{
        margin-top: 16px;
    }
    .search{
        float: right;
    }
    .map{
        width: 100%;
        height: 300px;
    }
</style>
